<template>
  <div class="quality-notify p-4">
    <el-card class="mb-4">
      <template #header>
        <div class="font-medium">发送方配置信息</div>
      </template>
      
      <el-form ref="formRef" :model="formData" label-width="120px">
        <el-form-item label="应用ID" prop="appId">
          <el-input v-model="formData.appId" placeholder="请输入应用ID" />
        </el-form-item>
        
        <el-form-item label="应用密钥" prop="appSecret">
          <el-input v-model="formData.appSecret" placeholder="请输入应用密钥" show-password />
        </el-form-item>

        <el-form-item label="推送通道" prop="pushChannel">
          <el-select v-model="formData.pushChannel" placeholder="请选择推送通道" class="w-full">
            <el-option label="系统内部通知" value="internal" />
            <el-option label="微信企业号" value="wechat" />
            <el-option label="钉钉" value="dingtalk" />
          </el-select>
        </el-form-item>

        <el-form-item label="通知模板" prop="notifyTemplate">
          <el-input
            v-model="formData.notifyTemplate"
            type="textarea"
            :rows="4"
            placeholder="请输入通知模板,支持变量: ${title}, ${content}, ${time}"
          />
        </el-form-item>

        <el-form-item label="是否启用" prop="enabled">
          <el-switch
            v-model="formData.enabled"
            active-text="YES"
            inactive-text="NO"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave">
            <div class="i-carbon-save mr-1" />
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">指定接收人群</span>
          <div class="flex gap-2">
            <el-button type="primary" @click="handleAdd">
              <div class="i-carbon-add mr-1" />
              添加
            </el-button>
            <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
              <div class="i-carbon-trash-can mr-1" />
              删除
            </el-button>
            <el-button type="success" :disabled="!selectedRows.length" @click="handleSendNotify">
              <div class="i-carbon-notification mr-1" />
              发送通知
            </el-button>
          </div>
        </div>
      </template>

      <!-- 接收人列表 -->
      <ArtTable
        :data="receiverList"
        :loading="loading"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="username" label="用户" min-width="120" />
        <el-table-column prop="notifyType" label="通知类型" min-width="120">
          <template #default="scope">
            <el-tag :type="scope.row.notifyType === 'report' ? 'success' : 'warning'">
              {{ scope.row.notifyType === 'report' ? '质量报告' : '违规提醒' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">
              <div class="i-carbon-edit mr-1" />
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">
              <div class="i-carbon-trash-can mr-1" />
              删除
            </el-button>
          </template>
        </el-table-column>
      </ArtTable>

      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑接收人对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加接收人' : '编辑接收人'"
      width="500px"
    >
      <el-form
        ref="receiverFormRef"
        :model="receiverForm"
        :rules="receiverRules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="receiverForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="通知类型" prop="notifyType">
          <el-select v-model="receiverForm.notifyType" placeholder="请选择通知类型" class="w-full">
            <el-option label="质量报告" value="report" />
            <el-option label="违规提醒" value="warning" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 发送方配置表单
const formRef = ref<FormInstance>()
const formData = reactive({
  appId: '',
  appSecret: '',
  pushChannel: 'internal',
  notifyTemplate: '质量检测${title}\n${content}\n时间: ${time}',
  enabled: false
})

// 接收人列表
const loading = ref(false)
const selectedRows = ref<any[]>([])
const receiverList = ref([
  {
    id: 1,
    username: 'admin',
    notifyType: 'report'
  },
  {
    id: 2,
    username: 'test',
    notifyType: 'warning'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const receiverFormRef = ref<FormInstance>()
const receiverForm = reactive({
  username: '',
  notifyType: 'report'
})

// 表单校验规则
const receiverRules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  notifyType: [{ required: true, message: '请选择通知类型', trigger: 'change' }]
}

// 保存配置
const handleSave = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      // TODO: 调用保存接口
      ElMessage.success('保存成功')
    }
  })
}

// 处理表格选择
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

// 处理分页
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

// 添加接收人
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  // 重置表单
  Object.assign(receiverForm, {
    username: '',
    notifyType: 'report'
  })
}

// 编辑接收人
const handleEdit = (row: any) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  // 填充表单数据
  Object.assign(receiverForm, row)
}

// 删除接收人
const handleDelete = (row: any) => {
  ElMessageBox.confirm('此操作将永久删除该接收人, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // TODO: 调用删除接口
    ElMessage.success('删除成功')
  })
}

// 批量删除
const handleBatchDelete = () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请选择要删除的项')
    return
  }
  ElMessageBox.confirm('此操作将永久删除选中的接收人, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // TODO: 调用批量删除接口
    ElMessage.success('删除成功')
  })
}

// 发送通知
const handleSendNotify = () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请选择接收人')
    return
  }
  ElMessageBox.confirm('确定要发送通知吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    // TODO: 调用发送通知接口
    ElMessage.success('发送成功')
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!receiverFormRef.value) return
  
  await receiverFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 调用保存接口
      ElMessage.success(dialogType.value === 'add' ? '添加成功' : '修改成功')
      dialogVisible.value = false
      // 重新加载数据
    }
  })
}
</script>

<style scoped>
.quality-notify {
  .dialog-footer {
    @apply flex justify-end gap-2;
  }
}
</style> 